<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <title>Elements</title>
</head>
<body>
	<script type="text/javascript">

		window.onload = function addCells() {
			//请求参数
			var list = {};
			//
			$.ajax({
				//请求方式
				type : "POST",
				//请求的媒体类型
				contentType: "application/json;charset=UTF-8",
				//请求地址
				url : "http://127.0.0.1:8888/uitest/elements",
				//数据，json字符串
				data : JSON.stringify(list),
				//请求成功
				success : function(result) {
					console.log("result");
					console.log(result);
					console.log("resultEnd");
					for (var i = result.length - 1; i >= 0; i--) {
						elementId = result[i].id;
						elementName = result[i].element_name;
						findFunc = result[i].another_find_type;
						findParams = result[i].another_find_param;
						anotherFindFunc = result[i].another_find_type;
						anotherFindParams = result[i].another_find_param;
						systemName = result[i].system_name;
						modelName = result[i].model_name;
						pageName = result[i].page_name;

						var table = document.getElementById("dataTable");
						var row = table.insertRow(1);
						var idCell = row.insertCell(0);
                        var nameCell = row.insertCell(1);
						var findFuncCell = row.insertCell(2);
                        var findParamsCell = row.insertCell(3);
						var anotherFindFuncCell = row.insertCell(4);
                        var anotherFindParamsCell = row.insertCell(5);
						var systemNameCell = row.insertCell(6);
						var modelNameCell = row.insertCell(7);
						var pageNameCell = row.insertCell(8);
						var operateCell = row.insertCell(9);
						idCell.innerHTML = elementId;
						nameCell.innerHTML = elementName;
						findFuncCell.innerHTML = findFunc;
						findParamsCell.innerHTML = findParams;
						anotherFindFuncCell.innerHTML = anotherFindFunc;
						anotherFindParamsCell.innerHTML = anotherFindParams;
						systemNameCell.innerHTML = systemName;
						modelNameCell.innerHTML = modelName;
						pageNameCell.innerHTML = pageName;
						operateCell.innerHTML = "<input id=\"cell" + elementId + "\" type=\"submit\" value=\"Delete\" onclick=\"deletePage(this)\"/>"
	
					}
				},
				//请求失败，包含具体的错误信息
				error : function(e){
					console.log(e.status);
					console.log(e.responseText);
				}
			});
		}
	
		function addelement(){
			window.location="http://127.0.0.1:8888/uitest/elementsPage/add";
		}

		function deletePage(btn) {
			//得到html
			console.log(btn)
			//得到对象
			console.log($(btn))
			//得到自定义的custom
			console.log("delete:" + $(btn).attr("id"))
			//请求参数
			var list = {
				"cell":$(btn).attr("id")
			};
			//
			$.ajax({
				//请求方式
				type : "POST",
				//请求的媒体类型
				contentType: "application/json;charset=UTF-8",
				//请求地址
				url : "http://127.0.0.1:8888/uitest/pages/delete",
				//数据，json字符串
				data : JSON.stringify(list),
				//请求成功
				success : function(result) {
					console.log("result");
					console.log(result);
					console.log("resultEnd");
					location.reload();
				},
				//请求失败，包含具体的错误信息
				error : function(e){
					console.log(e.status);
					console.log(e.responseText);
				}
			});
		}
	</script>
<div>
	<div id="headerMenu" style="width: 80%; margin-left: 15%; margin-top: 30px">
		<table id="headerMenuTable" width="100%" border="1" cellspacing="0" cellpadding="0">
			<tr>
                <th width="25%" height="35" align="center" bgcolor="rgba(19,132,184,1)">modelsPage</th>
                <th width="25%" height="35" align="center" bgcolor="rgba(19,132,184,1)">pagesPage</th>
                <th width="25%" height="35" align="center" bgcolor="rgba(19,132,184,1)">elementsPage</th>
                <th width="25%" height="35" align="center" bgcolor="rgba(19,132,184,1)" onclick="window.location='http://127.0.0.1:8888/uitest/scenariosPage'">scenariosPage</th>
  			</tr>
		</table>
	</div>
	<div>
	    <div id="headerView" style="width: 80%; margin-left: 15%; margin-top: 30px">
	        Page Name:
	        <input type="text" name="modelName" placeholder="OMS/WMS/PMS……" />
	    </div>
	    <div id="addBtn" style="float: right; margin-right: 15%">
	    	<button onclick="addelement()">Add</button>
	    </div>
	</div>
	<div id="tableView" style="text-align:center;margin-top: 50px; margin-left: 15%">
		<table id="dataTable" width="90%" border="1" cellspacing="0" cellpadding="0">
			<tr>
                <th width="5%" height="35" align="center" bgcolor="rgba(238,238,238,1)">ID</th>
				<th width="15%" height="35" align="center" bgcolor="rgba(238,238,238,1)">ElementName</th>
				<th width="10%" height="35" align="center" bgcolor="rgba(238,238,238,1)">FindFunc</th>
    			<th width="20%" height="35" align="center" bgcolor="rgba(238,238,238,1)">FindParams</th>
                <th width="5%" height="35" align="center" bgcolor="rgba(238,238,238,1)">AnotherFindFunc</th>
                <th width="20%" height="35" align="center" bgcolor="rgba(238,238,238,1)">AnotherFindParams</th>
                <th width="5%" height="35" align="center" bgcolor="rgba(238,238,238,1)">System</th>
                <th width="5%" height="35" align="center" bgcolor="rgba(238,238,238,1)">Model</th>
                <th width="5%" height="35" align="center" bgcolor="rgba(238,238,238,1)">Page</th>
    			<th width="10%" height="35" align="center" bgcolor="rgba(238,238,238,1)">Operator</th>
  			</tr>
		</table>
	</div>

</div>
</body>
</html>